<template>
  <div class="absolute inset-0 p-2 flex flex-col">
    <div class="mb-2">
      <el-radio-group v-model="activeName" size="small" class="mr-2">
        <el-radio-button v-for="(item, index) in tabs" :key="item" :index="index" :label="item"></el-radio-button>
      </el-radio-group>
    </div>

    <TableMode v-if="activeName === 'TABLE'" :table-data="tableData" :accuracy-summary="accuracySummary" />
  </div>
</template>

<script>
// 引入 api
import { getTop32 } from '@/api/accuracy-analysis'
// 引入组件
import TableMode from './TableMode.vue'

// 引入 vuex
import { mapState } from 'vuex'

export default {
  name: 'Top32',
  components: {
    TableMode
  },
  data() {
    return {
      // 标签页/选项
      tabs: ['TABLE', 'LINE'],
      // 标签页/激活项
      activeName: 'TABLE',

      // 前段是否准确数据/不参与计算准确率
      leadingAccuracyList: [],
      // 剩余是否准确数据
      trailingAccuracyList: [],
      // 前段数据/不参与计算准确率
      leadingList: [],
      // 剩余数据
      trailingList: [],
      // 号码出现次数
      numberCounts: null,
      // 准确率统计
      accuracySummary: null
    }
  },

  computed: {
    // 地区
    ...mapState('study', ['region']),
    // 表格数据
    tableData() {
      return [...this.leadingList, ...this.trailingList]
    }
  },

  watch: {
    region: {
      handler(newVal) {
        console.log('region', newVal)
        this.getTop32()
      },
      immediate: true
    }
  },

  methods: {
    getTop32() {
      getTop32({
        region: this.region
      }).then((httpResponse) => {
        const response = httpResponse.data
        const data = response.data
        if (response.code === 200) {
          const {
            leadingAccuracyList,
            trailingAccuracyList,
            leadingList,
            trailingList,
            numberCounts,
            accuracySummary
          } = data
          // 前段是否准确数据/不参与计算准确率
          this.leadingAccuracyList = leadingAccuracyList
          // 剩余是否准确数据
          this.trailingAccuracyList = trailingAccuracyList
          // 前段数据/不参与计算准确率
          this.leadingList = leadingList
          // 剩余数据
          this.trailingList = trailingList
          // 号码出现次数
          this.numberCounts = numberCounts
          // 准确率统计
          this.accuracySummary = accuracySummary
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .demo-02 {
//   styles
// }
</style>
